import { Link, useNavigate } from "react-router-dom";
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Select,
  Popconfirm,
  message
} from "antd";
import locale from "antd/es/date-picker/locale/zh_CN";
import { useState, useEffect } from "react";

import { getArticleListApi, deleteArticleApi } from "@/apis/article";

// 导入资源
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'

import useChannel from "@/hooks/useChannel";

const { Option } = Select;
const { RangePicker } = DatePicker;

const Article = () => {
    const navigate = useNavigate()

    const [messageApi, contextHolder] = message.useMessage();

    // 准备列数据
    const columns = [
        {
        title: '封面',
        dataIndex: 'cover',
        width: 120,
        render: cover => {
            return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
        }
        },
        {
        title: '标题',
        dataIndex: 'title',
        width: 220
        },
        {
        title: '状态',
        dataIndex: 'status',
        render: data => {
            if(data === 1){
                return <Tag color="warning">待审核</Tag>
            }else if(data === 2){
                return <Tag color="success">审核通过</Tag>
            }

        }
        },
        {
        title: '发布时间',
        dataIndex: 'pubdate'
        },
        {
        title: '阅读数',
        dataIndex: 'read_count'
        },
        {
        title: '评论数',
        dataIndex: 'comment_count'
        },
        {
        title: '点赞数',
        dataIndex: 'like_count'
        },
        {
        title: '操作',
        render: data => {
            return (
            <Space size="middle">
                <Button 
                type="primary" 
                shape="circle" 
                icon={<EditOutlined />}  
                onClick={() => {navigate(`/publish?id=${data.id}`)}} 
                />
                <Popconfirm title="是否删除文章？" okText="是" cancelText="否" onConfirm={() => {deleteArticle(data.id)}}>
                    <Button
                    type="primary"
                    danger
                    shape="circle"
                    icon={<DeleteOutlined />}
                    />
                </Popconfirm>
               
            </Space>
            )
        }
        }
    ]
    // 准备表格body数据
    const data = [
        {
        id: '8218',
        comment_count: 0,
        cover: {
            images: [],
        },
        like_count: 0,
        pubdate: '2019-03-11 09:00:00',
        read_count: 2,
        status: 0,
        title: 'wkwebview离线化加载h5资源解决方案'
        }
    ]
    //频道列表
    const { channelList} = useChannel();

    const [form] = Form.useForm();
   
    // 列表请求参数
    const [params, setParams] = useState({
        page: 1,
        per_page: 4,
        status: "",
        channel_id: "",
        begin_pubdate: "",
        end_pubdate: "",
    });

    // 分页配置
    const [total, setTotal] = useState(0);
    // 文章列表
    const [articleList, setArticleList] = useState([]);
    useEffect(() => {
        getArticleListApi(params).then(res => {
            setArticleList(res.data.results);
            setTotal(res.data.total_count);
        });
    },[params])

    const searchArticleList = (values) => { 
        console.log("values", values);
        setParams({
            page: 1,
            per_page: 4,
            status: values.status,
            channel_id: values.channel_id,
            begin_pubdate: values.date && values.date[0].format("YYYY-MM-DD"),
            end_pubdate: values.date && values.date[1].format("YYYY-MM-DD"),
        });
    };
    const paginationHandle = (page, pageSize) =>{
        console.log(page, pageSize);
        setParams({
            ...params,
            page: page,
            per_page: pageSize,
        });

    }
    //删除文章
    const deleteArticle = (id) => {
        console.log("id", id);
        deleteArticleApi(id).then(() => {
            messageApi.open({
                type: 'success',
                content: '删除成功',
            });
            setParams({
                ...params,
                page: 1,
                per_page: 4,
            });
        });
    }
    return (
        <div>
            {contextHolder}
            <Card
                title={
                <Breadcrumb
                    items={[
                    { title: <Link to={"/"}>首页</Link> },
                    { title: "文章列表" },
                    ]}
                />
                }
                style={{ marginBottom: 20 }}
            >
                <Form 
                initialValues={{ status: "",}}
                form={form}
                onFinish={searchArticleList}
                >
                <Form.Item label="状态" name="status">
                    <Radio.Group>
                    <Radio value={""}>全部</Radio>
                    <Radio value={1}>待审核</Radio>
                    <Radio value={2}>审核通过</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item label="频道" name="channel_id">
                    <Select
                    placeholder="请选择文章频道"
                    style={{ width: 120 }}
                    >
                        {channelList && channelList.map((item) => (
                            <Option key={item.id} value={item.id}>
                                {item.name}
                            </Option>
                        ))}
                    {/* <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option> */}
                    </Select>
                </Form.Item>

                <Form.Item label="日期" name="date">
                    {/* 传入locale属性 控制中文显示*/}
                    <RangePicker 
                    locale={locale} 
                    ></RangePicker>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                    筛选
                    </Button>
                </Form.Item>
                </Form>
            </Card>
            {/* 表格展示 */}
            <Card title={`根据筛选条件共查询到 ${total} 条结果：`}>
                <Table 
                rowKey="id" 
                columns={columns} 
                dataSource={articleList} 
                pagination={{
                    current: params.page, 
                    pageSize: params.per_page, 
                    total: total, 
                    // showTotal: (total) => {return `总计为 ${total} 条数据`},
                    onChange: (page,pageSize) => paginationHandle(page,pageSize)}}
                />
            </Card>
        </div>
    );
};

export default Article;
